<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<script type="text/javascript">

	function del(id) {
	if(confirm("是否删除这条记录！")){
		window.location="student?method=delete&id="+id;
		}
	}
	
	function update2(id){
		$('#work').empty();
		$('#work').load('student',{method:'update',id:id});
	}
	
	function bjchangge(bjId) {
		if(bjId==0){
			$('#mytable').empty();
		}else{
			$('#mytable').load('student?method=table&bjId='+bjId);
		}
	}
	
	function fh(){
		window.location="course?method=fh";
	}
	
	function add(){
		var bjId=$('#bj').val();
		$('#work').empty();
		$('#work').load('student',{method:'add',bjId:bjId});
	}
</script>

<style type="text/css">

	body{
		width:auto;
		height: auto;
		background-repeat:no-repeat;
		background-size: 100%;
	}
	
	.abc{
		width:1400px;
		margin: 20px auto;
		border-radius:15px;
		padding-bottom: 50px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	td,th{
		
		padding: 7px 7px;
	
	}
	
	table{
			width:100%;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            border-bottom-color:#666;
        }
    table td, table th{
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
            min-width: 200px;
        }
    table thead th{
            background-color: #CCE8EB;
            width: 100px;
        }
    table tr:nth-child(odd){
            background: #fff;
   	 }
    
    table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
	
	
	button{
		padding: 5px 10px;
		margin-bottom: 5px
	}
	
	.button2 {
		margin-top:5px;
		float:right;
		padding: 5px 10px;
		margin-bottom: 5px
	}
	
	select{
	    padding-left: 10px;
	    width: 120px;
	    height: 100%;
	}
	
	h3{
		text-align: center;
	}
}
	
	
</style>
</head>
<body>

<div class="abc">
	<h3>学生管理</h3>
	<p>
		<label>班级：</label>
		<select id="bj" onchange="bjchangge(this.value)">
			<option value="0">---请选择----</option>
			<c:forEach items="${bjs}"  var="bj">
				<option value="${bj.id}" ${bj.id==bjId?"selected=selected":""}>${bj.name} </option>
			</c:forEach>
		</select>
	</p>
	<div id="mytable">
	<c:if test="${bjId!=null}">
		<button class="button1" onclick="add()">新增</button>
	<table border="1">
		<thead>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>密码</th>
			<th colspan="2">操作</th>
		</tr>
	</thead>
	<tbody>
			<c:forEach items="${student}" var="s">
			<tr>
				<td>${s.stuNo}</td>
				<td>${s.name}</td>
				<td>${s.password}</td>
				<td><a href="javaScript:update2(${s.id})">修改</a></td>
				<td><a href="javaScript:del(${s.id})">删除</a></td>
			<tr>
			</c:forEach>
	</tbody>
		</table>
		</c:if>
	</div>
</div>
</body>
</html>